

import { useMemo } from "react"
import { TestPaperQuestionEntity } from "../../../../../queries/test"
import { QuestionAnswers, TestType } from "./PaperCard"
import { Checkbox, Input, Radio } from "antd"
type PaperContextProps = {
  currentItem?: TestPaperQuestionEntity,
  answers: QuestionAnswers,
  setAnswers: (answers: QuestionAnswers) => void,
  type: TestType
}
const PaperContext = ({
  currentItem,
  answers,
  setAnswers,
  type
}: PaperContextProps) => {

  const content = useMemo(() => {
    if (!currentItem) return [];
    let arr = [];
    try {
      arr = JSON.parse(currentItem?.content || "[]");
    } catch (e) { }
    return arr as string[];
  }, [currentItem])
  const renderContext = useMemo(() => {
    if (!currentItem) return null;
    const disabled = type !== "practice";
    let options = [];
    if (currentItem.type === "FILL") {
      let ans: string[] = [];
      try {
        ans = JSON.parse(currentItem.answer || "[]");
      } catch (e) {
        console.log(e)
      }
      const arr = JSON.parse(answers[currentItem.id] || "[]");
      return (
        <div className="flex flex-col gap-2">
          {ans.map((_, key) => {
            return (
              <div className="flex gap-2 items-center">
                <div className="w-20 text-right">
                  第{key + 1}空:
                </div>
                <Input
                  key={key}
                  disabled={disabled}
                  value={arr[key]}
                  onChange={(e) => {
                    arr[key] = e.target.value;
                    setAnswers({
                      ...answers,
                      [currentItem.id]: JSON.stringify(arr)
                    })
                  }}
                />
              </div>
            )
          })}
        </div>
      )
    }
    if (currentItem.type === "JUDGE") {
      options = [{
        label: "正确",
        value: true
      }, {
        label: "错误",
        value: false
      }]
    } else {
      options = content.map((item, key) => {
        const v = String.fromCharCode(65 + key)
        return {
          label: v + "、" + item,
          value: String.fromCharCode(65 + key)
        }
      })
    }
    if (currentItem.type === "MULTIPLE") {
      return (
        <Checkbox.Group
          value={JSON.parse(answers[currentItem.id] || "[]")}
          onChange={(e) => {
            if (disabled) return;
            setAnswers({
              ...answers,
              [currentItem.id]: JSON.stringify(e)
            })
          }}
        >
          {options.map((item, key) => (
            <div
              key={key}
            >
              <Checkbox
                value={item.value}
              >
                <div
                  dangerouslySetInnerHTML={{
                    __html: item.label
                  }}
                ></div>
              </Checkbox>
            </div>
          ))}
        </Checkbox.Group>
      )
    }
    return <Radio.Group
      value={JSON.parse(answers[currentItem.id] || "[]")[0]}
      onChange={(e) => {
        if (disabled) return;
        setAnswers({
          ...answers,
          [currentItem.id]: JSON.stringify([e.target.value])
        })
      }}
    >
      {options.map((item, key) => (
        <div
          key={key}
        >
          <Radio
            value={item.value}
          >
            <div
              dangerouslySetInnerHTML={{
                __html: item.label
              }}
            ></div>
          </Radio>
        </div>
      ))}
    </Radio.Group>
  }, [content, answers, setAnswers, type])
  console.log(currentItem)
  const help = useMemo(() => {
    if (!currentItem) return null;
    if (type !== "answer") return null;
    let answer = currentItem.answer;
    let self = answers[currentItem.id];
    try {
      if (!self) self = "未做"
      else self = JSON.parse(self).join(",")
      answer = JSON.parse(answer).join(",")
    } catch (e) { }
    return (
      <div
        className="flex flex-col gap-2"
        style={{
          background: "#E6E6FA"
        }}
      >
        <div
          className="flex gap-2 text-green-400"
        >
          <div>
            正确答案: {answer}
          </div>
          (
          <div>
            答题({currentItem.count})次
          </div>
          <div>
            答对({currentItem.right})次
          </div>
          <div>
            正确率({((currentItem.right / currentItem.count || 1) * 100).toFixed(2)}%)
          </div>
          )
        </div>
        <div
          className="text-red-400"
        >
          你的答案: {self}
        </div>
        <div>
          <span
            dangerouslySetInnerHTML={{
              __html: "试题解析:" + currentItem.help
            }}
          ></span>
        </div>
      </div>
    )
  }, [answers, type, currentItem])
  return (
    <div>
      <div
        dangerouslySetInnerHTML={{
          __html: currentItem?.name || ""
        }}
      ></div>
      {renderContext}
      {help}
    </div>
  )
}
export default PaperContext